<template>
  <div class="backTitle" :style="backgroundColor">
    <div class=" back" @click="back">
      <img src="imgs/icon-left.png" alt="">
    </div>
    <div class="title">
      {{title}}
    </div>
    <div class="search" @click="$router.push('/search')">
      <img src="imgs/icon-search.png" alt="">
    </div>
  </div>
</template>

<script>
import { removeItem } from '@/Storage'
export default {
  name: 'BackTitle',
  props: {
    title: {
      type: String
    },
    backgroundColor: {
      type: Object,
      // eslint-disable-next-line space-before-function-paren
      default: function () {
        return {
          backgroundColor: '#fff'
        }
      }
    }
  },
  methods: {
    back() {
      removeItem('addressList')
      this.$router.back()
    }
  }
}
</script>

<style lang='less' scoped>
.backTitle {
  display: flex;
  min-height: 50px;
  background-color: #fff;
  font-size: 22px;
  text-align: center;
  align-items: center;
  color: #666;
  .back {
    padding: 0 30px;
  }
  img {
    width: 50px;
    height: 50px;
  }
  .title {
    width: 100%;
  }
  .search {
    width: 120px;
    height: 60px;
    padding: 0 30px;
    img {
      width: 60px;
      height: auto;
    }
  }
}
</style>
